<template>
  <div class="out">
    <div>
      <span class="title">机器语音播报</span>
      <div class="ablock">
        <el-input
          v-model="textMessage"
          placeholder="请输入播报信息"
          class="txtInput"
        ></el-input>
        <el-button type="primary" @click="handleText">播 报</el-button>
      </div>
    </div>
    <div>
      <span class="title">实时语音播报</span>
      <div class="bblock" @click="sayHandle">
        <div class="say">
          <img
            src="../assets/image/say.png"
            style="display: block; height: 100%; width: 100%"
          />
        </div>
        <div class="textSay" @click="sayclick()">{{text}}</div>
        <div v-if="loadingdisplay" class="loader">
          <div class="span"></div>
          <div class="span"></div>
          <div class="span"></div>
          <div class="span"></div>
          <div class="span"></div>
          <div class="span"></div>
          <div class="span"></div>
          <div class="span"></div>
        </div>
      </div>
    </div>
    <div>
      <span class="title">文字留言板</span>
      <div class="ablock">
        <el-table :data="tableData">
          <el-table-column
            prop="person"
            label="留言人"
            width="220"
          ></el-table-column>
          <el-table-column
            prop="Message"
            label="留言内容"
            width="300"
          ></el-table-column>
          <el-table-column label="操作" width="100">
            <el-button
              style="margin-left: 10px"
              size="mini"
              type="danger"
              @click="deleteClick()"
              >删除</el-button
            >
          </el-table-column>
        </el-table>
      </div>

      <el-dialog
        title="提 示"
        :visible.sync="dialogVisible"
        width="30%"
        top="15%"
        :before-close="handleClose"
      >
        <span>提示内容</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  // 智能留言
  name: "Message",
  data: function () {
    return {
      tableData: [], // 留言板信息
      dialogVisible: false,
      textMessage: "", // 机器语音信息
      loadingdisplay: false,
      text: '点 击 说 话'
    };
  },
  created: function () {
    this.init();
  },
  methods: {
    init() {
      this.tableData = [
        {
          person: "testName1",
          Message: "testMessage1",
        },
        {
          person: "testName2",
          Message: "testMessage2",
        },
        {
          person: "testName3",
          Message: "testMessage3",
        },
      ];
    },
    deleteClick() {
      // 显示弹窗
      console.log("delete been click");
      this.dialogVisible = true;
      console.log(this.dialogVisible);
    },
    handleClose() {
      // 点击x关闭方法
      this.dialogVisible = false;
    },
    sayHandle() {
      // 语音播报
    },
    sayclick() {
        if(this.loadingdisplay) {
            this.text = '点 击 开 始'
            this.loadingdisplay = false
        } else {
            this.text = '点 击 停 止'
            this.loadingdisplay = true
        }
    },
  },
};
</script>

<style>
.out {
  margin: 30px 90px;
}
.title {
  margin: 15px 0;
  padding-left: 12px;
  line-height: 30px;
  display: block;
  color: whitesmoke;
}
.txtInput {
  margin: 10px 0 20px 0;
}
.ablock {
  padding: 14px 30px;
  background: whitesmoke;
  border-radius: 10px;
}
.say {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  border: none;
  margin: 5px 0px 0px 0px;
  /* background-image: url('../assets/image/say.png'); */
}
.textSay {
  /* display: inline-block; */
  vertical-align: top;
  height: 100%;
  margin: 10px 30px;
  color: gray;
  user-select: none;
  float: left;
}
.bblock {
  padding: 14px 30px;
  background: whitesmoke;
  border-radius: 10px;
  align-items: center;
  height: 70px;
}
.loader {
  float: left;
  margin: 0px 90px;
  /* padding-top: 14px; */
}
.loader .span {
  display: inline-block;
  width: 2em;
  height: 3em;
  background: #00e9caa0;
  border-radius: 0.2em;
  transform: skewX(-30deg) scale(0);
  margin-left: 5px;
  filter: opacity(0);
  animation: animate 1s alternate infinite;
  animation-delay: calc(var(--n) * 0.2s);
}
@keyframes animate {
  to {
    filter: opacity(1);
    transform: skewX(-30deg) scale(1);
  }
}
.loader .span:nth-child(1) {
  --n: 1;
}
.loader .span:nth-child(2) {
  --n: 2;
}
.loader .span:nth-child(3) {
  --n: 3;
}
.loader .span:nth-child(4) {
  --n: 4;
}
.loader .span:nth-child(5) {
  --n: 5;
}
.loader .span:nth-child(6) {
  --n: 6;
}
.loader .span:nth-child(7) {
  --n: 7;
}
.loader .span:nth-child(8) {
  --n: 8;
}

</style>